<template>
	<div class="w100 h100 page">
		<three class="three" :data="shearerInfoData" />
		<div class="content flex-col">
			<div class="left">
				<my-box title="采面信息">
					<div class="face-info-box">
						<Block v-for="(item, index) in infoList" :key="index" v-bind="{ ...item }" />
					</div>
				</my-box>

				<my-box title="带班人员" class="f1 h0">
					<div class="leader-list-item" v-for="(item, index) in leaderList" :key="index">
						<div class="leader-list-item-left">
							<iconpark-icon name="liebiaosanjiaobiaoshi"></iconpark-icon>
							{{ item.lead }}&nbsp;{{ item.leaderName }}
						</div>
						<div class="leader-list-item-right">
							{{ item.leaderPhone }}
							&nbsp;
							<iconpark-icon name="bodadianhua"></iconpark-icon>
						</div>
					</div>
				</my-box>

				<my-box title="循环割煤曲线" class="f1 h0">
					<div class="legend">
						<div class="legend-item" @click="handleClickCut('今日')">
							<div class="legend-item-left green">
								<div class="legend-item-left-center"></div>
							</div>
							<div class="legend-item-right">今日</div>
						</div>
						<div class="legend-item" @click="handleClickCut('昨日')">
							<div class="legend-item-left blue">
								<div class="legend-item-left-center"></div>
							</div>
							<div class="legend-item-right">昨日</div>
						</div>
					</div>
					<div id="coal-cutting" class="coal-cutting"></div>
				</my-box>

				<my-box title="地质信息" class="f1 h0">
					<div class="legend">
						<div class="legend-item">
							<div class="legend-item-left red">
								<div class="legend-item-left-center"></div>
							</div>
							<div class="legend-item-right">停采区域</div>
						</div>
						<div class="legend-item">
							<div class="legend-item-left blue">
								<div class="legend-item-left-center"></div>
							</div>
							<div class="legend-item-right">可采区域</div>
						</div>
						<div class="legend-item">
							<div class="legend-item-left green">
								<div class="legend-item-left-center"></div>
							</div>
							<div class="legend-item-right">已采区域</div>
						</div>
					</div>
					<div id="geo-chart" class="geo-chart"></div>
				</my-box>
			</div>
			<div class="right p-t-26">
				<div class="flex m-between" style="flex-wrap: wrap">
					<div class="start pointer" @click="shearerInfoData.state = 1">
						<img src="@/assets/img/rd/start.png" style="vertical-align: middle" alt="" />
						<span style="font-size: 14px; color: #deedff">一键启动</span>
					</div>
					<div class="stop pointer" @click="shearerInfoData.state = 0">
						<img src="@/assets/img/rd/stop.png" style="vertical-align: middle" alt="" />
						<span style="font-size: 14px; color: #deedff">一键停机</span>
					</div>
					<div class="empty"></div>
					<my-alarm type="1" :id="id" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="drainage">
import { leaderInfo, collectionInfo, shearerInfo, coalCutting } from '@a/fully-mechanized-face'
import three from './three.vue'
import Block from './components/block.vue'
import { useGeologyCharts, useCoalCuttingChart } from './hooks/useCharts'

// 综采id
const props = defineProps({
	id: {
		type: String,
		required: true
	}
})

const geoChartRef = useGeologyCharts({ id: 'geo-chart' }),
	coalCuttingChartRef = useCoalCuttingChart({ id: 'coal-cutting' })

const handleClickCut = (seriesName) => {
	if (coalCuttingChartRef.chart) {
		coalCuttingChartRef.chart.dispatchAction({
			type: 'toggleSelect',
			seriesName
		})
	}
}

// 采面信息
let infoList = reactive([
	{
		icon: 'richanliang',
		zh: '今日产量',
		en: "Today's output",
		value: '1.78',
		unit: '万吨'
	},
	{
		icon: 'yujishijian',
		zh: '预计采完时间',
		en: 'estimated time',
		value: '213',
		unit: '天'
	},
	{
		icon: 'wasinongdujitoujiweiwasi',
		zh: '机头瓦斯',
		en: 'Head gas',
		value: '0.1',
		unit: '%'
	},
	{
		icon: 'wasinongdujitoujiweiwasi',
		zh: '机尾瓦斯',
		en: 'tail gas',
		value: '0.15',
		unit: '%'
	}
])
collectionInfo({ mechanizedMiningFaceId: props.id }).then((res) => {
	infoList[0].value = res.data.dailyCollectionCount
	infoList[1].value = res.data.planDateCount
	infoList[2].value = res.data.workingFaceGas
	infoList[3].value = res.data.airCornerGas
})

// 带班人员
let leaderList = ref([])
leaderInfo({ mechanizedMiningFaceId: props.id }).then((res) => {
	leaderList.value = res.data
})

// 割煤机信息
let shearerInfoData = ref({
	state: 1
})
function shearerInfoFn() {
	shearerInfo({ mechanizedMiningFaceId: props.id }).then((res) => {
		if (res.data) {
			shearerInfoData.value = res.data
			shearerInfoData.value.state = 1
		}
	})
}
shearerInfoFn()

// 定义轮询
let rotationFn = setInterval(() => {
	shearerInfoFn()
}, 60000)
onUnmounted(() => {
	clearInterval(rotationFn)
	rotationFn = null
})
</script>

<style lang="scss" scoped>
.page {
	position: relative;
	.three {
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 1;
	}
	.content {
		width: 100%;
		height: 100%;
		position: relative;
		.left {
			height: 100%;
			width: 400px;
			position: absolute;
			z-index: 2;
			left: 10px;
			top: 0;
			display: flex;
			flex-direction: column;
			padding-top: 26px;
			box-sizing: border-box;
			.face-info-box {
				margin: -5px;
				display: flex;
				flex-wrap: wrap;
			}
			.leader-list-item {
				margin-bottom: 10px;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: rgba(#3e63b0, 0.2);
				height: 32px;
				padding: 10px;
				box-sizing: border-box;
				cursor: pointer;
				&-left {
					display: flex;
					align-items: center;
				}
				&-right {
					display: flex;
					align-items: center;
				}
			}

			.geo-chart {
				width: 100%;
				height: 130px;
				transform: translateX(-10px);
			}
			.coal-cutting {
				width: 100%;
				height: 130px;
				transform: translateX(-10px);
			}
			.legend {
				display: flex;
				justify-content: flex-end;
				&-item {
					display: flex;
					align-items: center;
					color: #fff;
					margin-right: 10px;
					cursor: pointer;
					&-left {
						width: 12px;
						height: 12px;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 3px;
						&-center {
							width: 8px;
							height: 8px;
							border-radius: 50%;
							background: #000;
						}
					}
					.red {
						background: #e16666;
					}
					.blue {
						background: #4785ff;
					}
					.green {
						background: #41ce80;
					}
				}
			}
		}
		//右侧样式
		.right {
			position: absolute;
			width: 270px;
			right: 0;
			top: 0;
			z-index: 2;
			.start,
			.stop {
				width: 130px;
				height: 40px;
				text-align: center;
				line-height: 36px;
				font-size: 14px;
				letter-spacing: 1px;
				border-radius: 4px;
				background: linear-gradient(180deg, #2c62b3 1%, #0e3064 100%);
				box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
				span {
					margin-left: 3px;
				}
			}
			.empty {
				width: 130px;
			}
			:deep(.abnormal) {
				position: relative;
				top: 0;
				right: 0;
				padding: 0;
				background: rgba(244, 87, 87, 0.2);
				border: 1px solid #f45757;
				box-sizing: border-box;
				width: 130px;
				height: 40px;
				text-align: center;
				line-height: 36px;
				font-size: 14px;
				letter-spacing: 1px;
				border-radius: 4px;
				box-shadow: 0px 2px 2px 0px #091121, inset 0px -1px 2px 0px rgba(255, 255, 255, 0.4);
				span {
					margin-left: 3px;
				}
			}
			.camera {
				cursor: pointer;
				position: absolute;
				top: 15%;
				right: 0;
			}
		}
	}
}
:deep(.box) {
	margin-bottom: 10px;
}
</style>
